<template>
  <div>
    <photo-provider>
      <div class="container">
        <photo-consumer v-for="(src, index) in imgList" :intro="src" :key="src" :src="src">
          <div class="image-wrapper">
            <img :src="src" class="item">
            <div class="delete-button" @click="deleteImage(index)">x</div>
          </div>
        </photo-consumer>
      </div>
    </photo-provider>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import {PhotoProvider, PhotoConsumer,} from 'vue3-photo-preview';

import 'vue3-photo-preview/dist/index.css';

// const imgList = ref(['https://namewjp.github.io/vue3-photo-preview/static/media/1.95c72610.jpg','https://namewjp.github.io/vue3-photo-preview/static/media/2.2d14a795.jpg','https://namewjp.github.io/vue3-photo-preview/static/media/1.95c72610.jpg','https://namewjp.github.io/vue3-photo-preview/static/media/2.2d14a795.jpg','https://namewjp.github.io/vue3-photo-preview/static/media/1.95c72610.jpg','https://namewjp.github.io/vue3-photo-preview/static/media/2.2d14a795.jpg','https://namewjp.github.io/vue3-photo-preview/static/media/1.95c72610.jpg','https://namewjp.github.io/vue3-photo-preview/static/media/2.2d14a795.jpg'])
const imgList = ref([])
import {getCutHistory ,deleteCutHistory} from "../api/index"
import {forEach} from "lodash";

let baseUrl = 'http://localhost:8100/uploads/'

async function init() {
  const {error, data} = await getCutHistory()
  console.log('data =>', data);
  for (let item of data.images) {
    imgList.value.push(baseUrl + item.user_id + '/' + item.filename);
    // imgList.value.push(baseUrl + item.user_id + '/' + "result" + item.filename);
  }
}

function deleteImage(index) {
  console.log(imgList.value)
  const separators = ['uploads/', '/'];
  const result = separators.reduce((str, sep) => String(str).split(sep), imgList.value[index]);
  console.log('imgList =>', result);
  deleteCutHistory(result[4]);

  imgList.value.splice(index, 1);

}

init()
</script>

<style lang="scss" scoped>
//.view-box {
//  width: 100%;
//  height: 100%;
//  object-fit: cover;
//  display: flex;
//  justify-content: center;
//}
.container {
  width: 100%;
  overflow-x: scroll;
}

.item {
  width: 100px;
  height: 250px;
}
.image-wrapper {
  position: relative;
  display: inline-block;

  .item {
    width: 200px;
    height: 220websotrmpx;
  }

  .delete-button {
    position: absolute;
    right: 0;
    bottom: 0;
    display: none;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
  }

  &:hover .delete-button {
    display: block;
  }
}
</style>
